import React from 'react';
import { SearchBar } from 'antd-mobile';

export default class Index extends React.Component {
    constructor(props){
        super(props)
		this.state={
            cancelText: '取消',
            value: '',
            historyItems: []
        }
    }
	componentDidMount(){
        document.title = '搜索'
        this.autoFocusInst.focus();
        // 获取历史记录
        let { historyItems } = localStorage;
        if(historyItems){
            var list=historyItems.split('|')
            if(list.length>10){
                list=list.slice(0,9)
            }
            this.setState({
                historyItems: list
            })
        }
    }
    search(){
        if(this.state.value!==''){
            this.setHistoryItems(this.state.value)
            let { historyItems } = localStorage;
            var list=historyItems.split('|')
            if(list.length>10){
                list=list.slice(0,9)
            }
            this.setState({
                historyItems: list
            })
            this.props.history.push('/page/home/home/searchresult/'+this.state.value)
            this.setState({
                value: '',
            })
        }
    }
    setHistoryItems(keyword) {
        let { historyItems } = localStorage;
        if (historyItems === undefined) {
          localStorage.historyItems = keyword;
        } else {
          historyItems = keyword + '|' + historyItems.split('|').filter(e => e != keyword).join('|');
          localStorage.historyItems = historyItems;
        }
    }
    // 清除历史记录
    clearHistory() {
        localStorage.removeItem('historyItems'); 
        window.location.reload(true);
    }
	render(){
		return(
			<div className='search'>
                <SearchBar onChange={(val)=>{
                    this.setState({
                        value: val,
                    })
                    if(val===''){
                        this.setState({
                            cancelText: '取消'
                        })
                    }else{
                        this.setState({
                            cancelText: '搜索'
                        })
                    }
                }} placeholder="搜索" ref={ref => this.autoFocusInst = ref} onCancel={(val)=>{
                    if(val!=''){
                        console.log(123)
                        this.search()
                    }else{
                        this.props.history.goBack()
                    }
                }} onSubmit={this.search.bind(this)} onClear={(val)=>{
                    this.setState({
                        value: ''
                    })
                }} cancelText={this.state.cancelText} />
                {this.state.historyItems.map((Item,index)=>{
                    return(
                        <div className='row' key={'i'+index} onClick={()=>{this.props.history.push('/page/home/home/searchresult/'+Item)}}>
                            <p>{Item}</p>
                            <img alt='' src={require('../../imgs/yous.png')} className='yous' />
                        </div>
                    )
                })}
                <p className='clear_history_btn' onClick={this.clearHistory.bind(this)}>清除历史记录</p>
			</div>
		)
	}
}
